<template>
  <div class="body0">
    <el-card style="margin: 0 auto;padding: 0">
      <div class="searchbar">
        <img class="biglogo" src="../../assets/imgs/logo-01-b-01.png">
        <el-button style="float: right;margin-top: 15px;margin-left: 20px;"  icon="el-icon-shopping-cart-2" @click="tocart">我的购物车</el-button>
        <el-button style="float: right;margin-top: 15px;margin-left: 20px;"  icon="el-icon-shopping-bag-2" @click="toorder">我的订单</el-button>
        <div class="search" style="width: 450px;">
          <el-input placeholder="请输入商品名" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
    </el-card>
    <el-card style="width: 1190px;margin: 0 auto;margin-top: 20px;text-align: left"shadow="never">
      我的订单
    </el-card>
    <el-tabs style="width: 1190px;margin: 0 auto;margin-top: 20px;" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="已完成" name="first">
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 1190px;margin: 0 auto;margin-top: 20px;"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55"
              align="center">
          </el-table-column>
          <el-table-column
              prop="productUrl"
              label="商品主图"
              width="120"
              align="center">
            <el-image
                style="width: 100px; height: 100px"
                :src="require('../../assets/stx-mall/detail/img.png')"
                :fit="fit">
            </el-image>
          </el-table-column>
          <el-table-column
              prop="productBrief"
              label="商品简介">
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="productCount"
              label="数量"
              width="50"
              align="center">
          </el-table-column>
          <el-table-column
              prop="orderId"
              label="订单编号"
              width="110"
              align="center">
          </el-table-column>
          <el-table-column
              prop="payTime"
              label="支付时间"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="receiveTime"
              label="签收时间"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="receiverName"
              label="收货人"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="receiverAddress"
              label="收货地址"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="operation"
              label="操作"
              width="100"
              align="center">
            <el-button size="mini" style="background-color: rgb(227, 31, 27);font-size: 10px;" type="danger" round>删除</el-button>
            <el-button size="mini" style="margin: 0 auto;margin-left: 0;margin-top: 5px; background-color: rgb(64, 158, 255);font-size: 10px;border: none" type="danger" round>评价</el-button>
            <el-button size="mini" style="margin: 0 auto;margin-left: 0;margin-top: 5px; background-color: rgb(103, 194, 58);font-size: 10px;border: none" type="danger" round>申诉</el-button>
          </el-table-column>
        </el-table>
        <div style="width: 1190px;margin: 0 auto; margin-top: 20px;margin-bottom: 20px;">
          <el-pagination
              style="float: right"
              background
              layout="prev, pager, next"
              :total="1000">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="未支付" name="second">
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 1190px;margin: 0 auto;margin-top: 20px;"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55"
              align="center">
          </el-table-column>
          <el-table-column
              prop="productUrl"
              label="商品主图"
              width="120"
              align="center">
            <el-image
                style="width: 100px; height: 100px"
                :src="require('../../assets/stx-mall/detail/img.png')"
                :fit="fit">
            </el-image>
          </el-table-column>
          <el-table-column
              prop="productBrief"
              label="商品简介">
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="productCount"
              label="数量"
              width="50"
              align="center">
          </el-table-column>
          <el-table-column
              prop="orderId"
              label="订单编号"
              width="110"
              align="center">
          </el-table-column>
          <el-table-column
              prop="remainPayTime"
              label="剩余支付时间"
              width="150"
              align="center">
            <el-statistic :value="deadline2" time-indices></el-statistic>
          </el-table-column>
          <el-table-column
              prop="receiverName"
              label="收货人"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="receiverAddress"
              label="收货地址"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="operation"
              label="操作"
              width="150"
              align="center">
            <el-button size="mini" style="background-color: rgb(227, 31, 27);font-size: 10px;" type="danger" round>删除</el-button>
            <el-button size="mini" style="background-color: rgb(64, 158, 255);font-size: 10px;border: none" type="danger" round>支付</el-button>
          </el-table-column>
        </el-table>
        <div style="width: 1190px;margin: 0 auto; margin-top: 20px;margin-bottom: 20px;">
          <el-pagination
              style="float: right"
              background
              layout="prev, pager, next"
              :total="1000">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="待收货" name="third">
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 1190px;margin: 0 auto;margin-top: 20px;"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55"
              align="center">
          </el-table-column>
          <el-table-column
              prop="productUrl"
              label="商品主图"
              width="120"
              align="center">
            <el-image
                style="width: 100px; height: 100px"
                :src="require('../../assets/stx-mall/detail/img.png')"
                :fit="fit">
            </el-image>
          </el-table-column>
          <el-table-column
              prop="productBrief"
              label="商品简介">
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="productCount"
              label="数量"
              width="50"
              align="center">
          </el-table-column>
          <el-table-column
              prop="orderId"
              label="订单编号"
              width="110"
              align="center">
          </el-table-column>
          <el-table-column
              prop="payTime"
              label="支付时间"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="logisticsStatus"
              label="物流状态"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="receiverName"
              label="收货人"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="receiverAddress"
              label="收货地址"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="operation"
              label="操作"
              width="150"
              align="center">
            <el-button size="mini" style="margin: 0 auto; background-color: rgb(227, 31, 27);font-size: 10px;" type="danger" round>查看物流</el-button>
            <el-button size="mini" style=" margin: 0 auto; margin-top: 5px; background-color: rgb(64, 158, 255);font-size: 10px;border: none" type="danger" round>确认收货</el-button>
          </el-table-column>
        </el-table>
        <div style="width: 1190px;margin: 0 auto; margin-top: 20px;margin-bottom: 20px;">
          <el-pagination
              style="float: right"
              background
              layout="prev, pager, next"
              :total="1000">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
      <el-card style="height: 60px;position: fixed;bottom: 0;width: 100%">
        <div style="width: 1190px;margin: 0 auto;">
          <el-checkbox style="float: left;margin-left: 20px;" v-model="checked">全选</el-checkbox>
          <el-button style="float: right;position: relative;bottom: 10px;background-color: rgb(227, 31, 27);color: white">删除</el-button>
          <span style="margin-right: 20px;float: right">已选择1笔订单</span>
        </div>
      </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      deadline2: Date.now() + 1000 * 60 * 60 * 8,
      activeName: 'first',
      checked: true,
      num4: 1,
      tableData: [{
        productUrl:[],
        productBrief: '跑步机家用降噪可折叠免安装宽大跑台（支持HUAWEI HiLink）',
        price: '￥1459',
        productCount:'x3',
        orderId:'23091000000',
        payTime:'2023-09-30 10:01:59',
        receiveTime:'2023-09-30 10:01:59',
        logisticsStatus:'运输中',
        receiverName:'大锤',
        receiverAddress:'上海市-徐汇区',
        operation:'',

      }],
      multipleSelection: []
    }
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tocart(){
      this.$router.push('cart')
    },
  }
}
</script>
<style>

.searchbar{
  width: 900px;margin: 0 auto;height: 70px;
}
.search{
  float: right;margin-top: 15px;
}
.biglogo{
  width: 100px;float: left;
}

.el-main{
  margin: 0;padding: 0;
}


</style>